<template>
  <view class="cart-container" v-if="size!=0">
    <!-- 收货地址组件 -->
    <my-address></my-address>
    <!-- 商品的列表标题区域 -->
    <view class="cart-title">
      <!-- 左侧的图标 -->
      <uni-icons type="shop" size="18"></uni-icons>
      <!-- 右侧的文字 -->
      <text class="cart-title-text">购物车</text>
    </view>

    <!-- uswipe ,简写形式-->
    <uni-swipe-action>
      <!-- 循环渲染购物车的商品信息 -->
      <block v-for="(goods,i) in cart" :key="i">
        <!-- 从这儿也可以看出组件的重要性，既具有复用性 -->
        <uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(goods)">
          <my-goods :item="goods" :show-radio="true" @radio-change="radioChangeHandler" :show-num="true"
            @num-change="numerChangeHandler"></my-goods>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    
    <!-- 使用自定义的结算组件 -->
    <my-settle :checked-count="checkedCount" :total-money="totalMoney" @is-All-Choose="isAllChoose"></my-settle>
  </view>
  <!-- 空白购物车区域 -->
  <view class="empty-cart" v-else>
    <image src="../../static/空空如也图片.jpg" class="empty-img"></image>
    <text>空空如也</text>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabBar-badeg.js'
  export default {
    // mixins属性可以实现对相同代码的封装，提高代码的可维护性，用来切换到不同页面时，仍然可以展示右下徽标
    mixins: [badgeMix],
    data() {
      return {
        options:[
          {
            text:'删除',
            style:{
               backgroundColor:'#C00000'
            }
          }
        ],
        // 购物商品列表
        cart: uni.$store._state.data.cart
      };
    },
    methods: {
      radioChangeHandler(goods) {
        if (goods.goods_state) {
          goods.goods_state = false
        } else {
          goods.goods_state = true
        }
        uni.$store._mutations.updateGoodsState[0](goods)
        this.checkedCount=uni.$store.getters.checkCount
        this.totalMoney=uni.$store.getters.totalMoney
      },
      numerChangeHandler(goods) {
        uni.$store._mutations.updateGoodsCount[0](goods)
        uni.setTabBarBadge({
          index: 2,
          text: uni.$store.getters.total + ''
        }),
        this.checkedCount=uni.$store.getters.checkCount
        this.totalMoney=uni.$store.getters.totalMoney
      },
      swipeItemClickHandler(goods){
        // 用来删除指定数据
        uni.$store._mutations.removeGoodsById[0](goods)
        console.log("hahah");
        //重新渲染，存储在Storage中的数据被删除完之后，需要重新给cart复制，重新渲染
        this.cart=uni.$store._state.data.cart
        this.total=uni.$store.getters.total
        // console.log(this.total);
        if(this.total!=0){
          uni.setTabBarBadge({
            index:2,
            text:this.total+''
          })
        }else{
          uni.setTabBarBadge({
            index:2,
            text:''
          })
        }
        this.totalMoney=uni.$store.getters.totalMoney
        this.checkedCount=uni.$store.getters.checkCount
        this.size=uni.$store._state.data.cart.length
      },
      isAllChoose(){
        this.totalMoney=uni.$store.getters.totalMoney
        this.checkedCount=uni.$store.getters.checkCount
        uni.setTabBarBadge({
          index:2,
          text:this.checkedCount+''
        })
      }
    }
  }
</script>

<style lang="scss">
  .cart-container{
    padding-bottom: 50px;
  }
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border: 1px solid #efefef;

    .cart-title-text {
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .empty-cart{
    display: flex;
    // flex-wrap: wrap;
    // height: 500px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image{
        width: 250rpx;
        height:250rpx;
        padding-top: 250rpx;
    }
    font-size: 10px;
    font-weight: bolder;
  }
</style>